<section class="scroll-container">
    <div class="row">
        <br>
        <div class="small-12 columns">
            <div class="row">
                <div class="small-12 columns">
                    <h4>USUARIOS</h4>
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="small-12 medium-6 large-3 columns">                    
                    <a href="/#/users/create" class="button tiny expand">Nuevo Usuario</a>
                </div>
                <div class="small-12 medium-6 columns right" style="margin-top: 1px;">        
                    <div class="row collapse">                                                        
                        <div class="small-9 medium-9 columns">
                            <input type="text" placeholder="Buscar" value="">
                        </div>
                        <div class="small-3 medium-3 columns">
                            <a class="button postfix" ng-model="search">Buscar</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <table width="100%">
                    <thead>
                        <tr>
                            <th width="200">Creado</th>
                            <th width="200">Usuario</th>
                            <th width="400">Nombre</th>
                            <th>Sexo</th>
                            <th width="150">Opciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="user in usersList | filter: search">
                            <td>{{user.birthday | date}}</td>
                            <td>{{user.username}}</td>
                            <td>{{user.name + ' ' + user.lastname}}</td>
                            <td>{{user.gender}}</td>
                            <td>
                                <a href="#/users/edit/{{user.usr_id}}" 
                                   class="button tiny radius"
                                   style="margin: 0px !important">
                                   Editar
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--
            <div class="row center">
                <ul class="pagination">
                  <li class="arrow unavailable"><a href="">&laquo;</a></li>
                  <li class="current"><a href="">1</a></li>
                  <li><a href="">2</a></li>
                  <li><a href="">3</a></li>
                  <li><a href="">4</a></li>
                  <li class="unavailable"><a href="">&hellip;</a></li>
                  <li><a href="">12</a></li>
                  <li><a href="">13</a></li>
                  <li class="arrow"><a href="">&raquo;</a></li>
                </ul>
            </div>
            -->
        </div>
    </div>
</section>